<template>
  <div id=push>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="商品名">
        <el-input v-model="formInline.proName" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <template>
          <el-button type="success" @click="dialogFormVisible=true">添加</el-button>
        </template>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="proId"
        label="ID"
        width="120">
      </el-table-column>
      <el-table-column
        prop="proName"
        label="商品名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="newPrice"
        label="现售价"
        width="120"
        >
      </el-table-column>
      <el-table-column
        prop="picUrl"
        label="图片"
        width="120"
        >
        <template slot-scope="scope">
          <img :src="scope.row.picUrl" style="width:50px;height:50px" />
        </template>
      </el-table-column>
      <el-table-column
        prop="proNum"
        label="数量"
        width="120"
        >
      </el-table-column>
      <el-table-column
        prop="sort"
        label="分类"
        width="120"
        >
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="添加时间"
        width="180"
        >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-button type="danger" @click="deleteProduct(scope.row.proId)">删除</el-button>
        <el-button type="primary" @click="uptProduct(scope.row)">修改</el-button>
        <el-button type="danger" @click="inProduct(scope.row.proId)">加入回收站</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="cIndex"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--商品添加-->
    <el-dialog title="商品添加" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="proName">
          <el-input v-model="ruleForm.proName"></el-input>
        </el-form-item>
        <el-form-item label="商品原价" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品现价" prop="newPrice">
          <el-input v-model="ruleForm.newPrice"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="picUrl">
         <el-input v-model="ruleForm.picUrl"></el-input>
        </el-form-item>
        <el-form-item label="生产地址" prop="proAdress">
          <el-input v-model="ruleForm.proAdress"></el-input>
        </el-form-item>
        <el-form-item label="保质期" prop="sheifLife">
          <el-input v-model="ruleForm.sheifLife"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="proNum">
          <el-input v-model="ruleForm.proNum"></el-input>
        </el-form-item>
        <el-form-item label="种类" prop="sort">
          <el-input v-model="ruleForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="inventory">
          <el-input v-model="ruleForm.inventory"></el-input>
        </el-form-item>
        <el-form-item label="添加时间">
          <el-col :span="11">
            <el-form-item prop="addTime">
            <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.addTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="买过" prop="bought">
          <el-input v-model="ruleForm.bought"></el-input>
        </el-form-item>
        <el-form-item label="商家" prop="business">
          <el-input v-model="ruleForm.business"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--商品修改-->

    <el-dialog title="商品修改" :visible.sync="dialogFormVisible111">
      <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="proName">
          <el-input v-model="ruleForm1.proName"></el-input>
        </el-form-item>
        <el-form-item label="商品原价" prop="price">
          <el-input v-model="ruleForm1.price"></el-input>
        </el-form-item>
        <el-form-item label="商品现价" prop="newPrice">
          <el-input v-model="ruleForm1.newPrice"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="picUrl">
          <!-- <el-input v-model="ruleForm1.picUrl"></el-input> -->
          <template slot-scope="scope">
            <img :src="scope.row.picUrl" style="width:50px;height:50px" />
          </template>
        </el-form-item>
        <el-form-item label="生产地址" prop="proAdress">
          <el-input v-model="ruleForm1.proAdress"></el-input>
        </el-form-item>
        <el-form-item label="保质期" prop="sheifLife">
          <el-input v-model="ruleForm1.sheifLife"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="proNum">
          <el-input v-model="ruleForm1.proNum"></el-input>
        </el-form-item>
        <el-form-item label="种类" prop="sort">
          <el-input v-model="ruleForm1.sort"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="inventory">
          <el-input v-model="ruleForm1.inventory"></el-input>
        </el-form-item>
        <el-form-item label="买过" prop="bought">
          <el-input v-model="ruleForm1.bought"></el-input>
        </el-form-item>
        <el-form-item label="商家" prop="business">
          <el-input v-model="ruleForm1.business"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="uuuppp('ruleForm1')">保存</el-button>
          <el-button @click="resetForm('ruleForm1')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          tableData: [],
            total:0,
            cIndex:1,
            pSize:2,
            formInline:{
                proName:'',
            },
            dialogFormVisible:false,
            dialogFormVisible111:false,
            ruleForm:{
                proName:"",
                price:"",
                newPrice:"",
                picUrl:"",
                proAdress:"",
                sheifLife:"",
                proNum:"",
                sort:"",
                inventory:"",      
                addTime:"",
                bought:"",
                business:"",
            },
            ruleForm1:{
                proName:"",
                price:"",
                newPrice:"",
                picUrl:"",
                proAdress:"",
                sheifLife:"",
                proNum:"",
                sort:"",
                inventory:"",      
                addTime:"",
                bought:"",
                business:"",
            },
            rules: {
          proName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          addTime: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
           newPrice: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },

          ],
           proAdress: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },

          ],
           sheifLife: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },

          ],
           proNum: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },

          ],
           inventory: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },

          ],
           bought: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },

          ],
          business: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },

          ],
            }
          }
      },
      //(文档就绪)
      created:function()
      {
          this.axios
            .get("http://localhost:35043/api/Product/Index",{
                params:{
                    pageIndex:this.cIndex,
                    pageSize:this.pSize,
                },
            })
            .then((res)=>{
                this.tableData=res.data.data;
                this.total=res.data.count;
            });
      },
       methods: {
          show(){
               this.axios
            .get("http://localhost:35043/api/Product/Index",{
                params:{
                    pageIndex:this.cIndex,
                    pageSize:this.pSize,
                }
            })
            .then((res)=>{
                this.tableData=res.data.data;
                this.total=res.data.count;
            });
          },
          handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
            this.axios
            .get("http://localhost:35043/api/Product/Index",{
                params:{
                    pageIndex:this.cIndex,
                    pageSize:val,
                }
            })
            .then((res)=>{
                this.tableData=res.data.data;
                this.total=res.data.count;
            });
          },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.axios
            .get("http://localhost:35043/api/Product/Index",{
                params:{
                    pageIndex:val,
                    pageSize:this.pSize,
                }
            })
            .then((res)=>{
                this.tableData=res.data.data;
                this.total=res.data.count;
            });
        },
        //查询
        onSubmit(){
          this.axios
            .get("http://localhost:35043/api/Product/Index",{
                params:{
                    pName:this.formInline.proName,
                    pageIndex:this.cIndex,
                    pageSize:this.pSize,
                },
            })
            .then((res)=>{
                this.tableData=res.data.data;
                this.total=res.data.count;
            });
        },
        //删除
        deleteProduct(a){
            if(!confirm("确认删除吗？")){
                return;
            }
                this.axios
                    .delete("http://localhost:35043/api/Product/DelProduct",{
                        params:{
                            id:a,
                        }
                    })
                    .then((res)=>{
                        if(res.data.code ==0)
                        {
                          this.show();
                            alert("删除成功");
                            
                        }else
                        {
                            alert("删除失败");
                            return;
                        }
                    })
        },
        //添加
        submitForm(ruleForm){
          //时间格式化
        var date = new Date(this.ruleForm.addTime) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
  
        console.log( Y+M+D+h+m+s)
 
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
              console.log(ruleForm);
                   this.axios({
                url:"http://localhost:35043/api/Product/AddProduct",
                method:"post",
                data:{
                    proName:this.ruleForm.proName,
                    price:this.ruleForm.price,
                    newPrice:this.ruleForm.newPrice,
                    picUrl:this.ruleForm.picUrl,
                    proAdress:this.ruleForm.proAdress,
                    sheifLife:this.ruleForm.sheifLife,
                    proNum:this.ruleForm.proNum,
                    sort:this.ruleForm.sort,
                    inventory:this.ruleForm.inventory,
                    addTime:Y+M+D+h+m+s,
                    bought:this.ruleForm.bought,
                    business:this.ruleForm.business,
                },
            })
            .then((res)=>{
                if(res.data.code==0)
                {
                  this.show();
                    alert("添加成功");
                    
                }else{
                    alert("添加失败");
                    return;
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

        },
        //反填
        uptProduct(b){
            this.dialogFormVisible111=true;
            this.ruleForm1=b;
            var id=b.proId;
            console.log(id);

        },
        //修改
        uuuppp(ruleForm1){

 
                    this.$refs[ruleForm1].validate((valid) => {
          if (valid) {
              console.log(ruleForm1);
                   this.axios({
                url:"http://localhost:35043/api/Product/UptProduct",
                method:"post",
                data:{
                    ProId:this.ruleForm1.proId,
                    proName:this.ruleForm1.proName,
                    price:this.ruleForm1.price,
                    newPrice:this.ruleForm1.newPrice,
                    picUrl:this.ruleForm1.picUrl,
                    proAdress:this.ruleForm1.proAdress,
                    sheifLife:this.ruleForm1.sheifLife,
                    proNum:this.ruleForm1.proNum,
                    sort:this.ruleForm1.sort,
                    inventory:this.ruleForm1.inventory,
                    addTime:this.ruleForm1.addTime,
                    bought:this.ruleForm1.bought,
                    business:this.ruleForm1.business,
                },
            })
            .then((res)=>{
                if(res.data.code==0)
                {
                    alert("修改成功");
                    this.show();
                }else{
                    alert("修改失败");
                    return;
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

        },
        //加入回收站
        inProduct(c){
          if(!confirm("确认加入回收站吗？")){
                return;
            }
          this.axios
            .post("http://localhost:35043/api/Product/UptStatus?id="+c
             
              )
              .then((res)=>{
                if(res.data.code ==0)
                  {
                    this.show();
                    alert("加入回收站成功");
                    this.$router.push("/Recycle");    
                  }else
                  {
                    alert("加入回收站失败");
                    return;
                  }
              })
        }

    }
  }
</script>

